<!-- 编辑弹窗 -->
<template>
  <ele-modal :form="true" :destroy-on-close="true" :width="460" v-model="visible"
    :title="isUpdate ? '修改设备管理' : '添加设备管理'">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" @submit.prevent="">
      <el-form-item label="员工名称" prop="employeeName">
        <el-input clearable v-model="form.employeeName" placeholder="请输入员工名称" />
      </el-form-item>
      <el-form-item label="设备号" prop="deviceId">
        <el-input clearable v-model="form.deviceId" placeholder="请输入设备号" />
      </el-form-item>
      <el-form-item label="设备版本号" prop="deviceVersion">
        <el-input clearable v-model="form.deviceVersion" placeholder="请输入设备版本号" />
      </el-form-item>
      <el-form-item label="电量" prop="batteryLevel">
        <dict-data code="device_battery_level" v-model="form.batteryLevel" placeholder="请选择电量" />
      </el-form-item>
      <el-form-item label="所属组织" prop="deptId">
        <dept-select v-model="form.deptId" placeholder="请选择所属组织" />
      </el-form-item>
      <el-form-item label="最近心跳" prop="lastHeartbeat">
        <el-date-picker v-model="form.lastHeartbeat" value-format="YYYY-MM-DD" placeholder="请选择最近心跳"
          class="ele-fluid" />
      </el-form-item>
      <el-form-item label="是否在线" prop="isOnline">
        <dict-data code="device_is_online" v-model="form.isOnline" placeholder="请选择是否在线" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <dict-data code="device_status" v-model="form.status" placeholder="请选择状态" />
      </el-form-item>
      <el-form-item label="待上传文件" prop="pendingUpload">
        <el-input clearable v-model="form.pendingUpload" placeholder="请输入待上传文件" />
      </el-form-item>
      <el-form-item label="剩余存储空间(KB)" prop="storageRemaining">
        <el-input clearable v-model="form.storageRemaining" placeholder="请输入剩余存储空间(KB)" />
      </el-form-item>
      <el-form-item label="信号值" prop="signalStrength">
        <el-input clearable v-model="form.signalStrength" placeholder="请输入信号值" />
      </el-form-item>
      <el-form-item label="录音总时长(秒)" prop="totalRecordingDuration">
        <el-input clearable v-model="form.totalRecordingDuration" placeholder="请输入录音总时长(秒)" />
      </el-form-item>
      <el-form-item label="录音次数" prop="recordingCount">
        <el-input clearable v-model="form.recordingCount" placeholder="请输入录音次数" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { EleMessage } from 'ele-admin-plus';
import { useFormData } from '@/utils/use-form-data';
import { addEtpEmployeeDevices, updateEtpEmployeeDevices } from '@/api/etp/etpEmployeeDevices';
import DeptSelect from '@/views/system/dept/components/dept-select.vue';

const props = defineProps({
  /** 修改回显的数据 */
  data: Object
});

const emit = defineEmits(['done']);

/** 弹窗是否打开 */
const visible = defineModel({ type: Boolean });

/** 是否是修改 */
const isUpdate = ref(false);

/** 提交状态 */
const loading = ref(false);

/** 表单实例 */
const formRef = ref(null);

/** 表单数据 */
const [form, resetFields, assignFields] = useFormData({
  id: void 0,
  employeeName: '',
  deviceId: '',
  deviceVersion: '',
  batteryLevel: void 0,
  deptId: void 0,
  lastHeartbeat: '',
  isOnline: void 0,
  status: void 0,
  pendingUpload: void 0,
  storageRemaining: void 0,
  signalStrength: void 0,
  totalRecordingDuration: void 0,
  recordingCount: void 0,
  createdBy: '',
  createdTime: '',
  updateBy: '',
  updateTime: ''
});

/** 表单验证规则 */
const rules = reactive({
  employeeName: [
    {
      required: true,
      message: '请输入员工名称',
      type: 'string',
      trigger: 'blur'
    }
  ],
  deviceId: [
    {
      required: true,
      message: '请输入设备号',
      type: 'string',
      trigger: 'blur'
    }
  ],
  deviceVersion: [
    {
      required: true,
      message: '请输入设备版本号',
      type: 'string',
      trigger: 'blur'
    }
  ]
});

/** 关闭弹窗 */
const handleCancel = () => {
  visible.value = false;
};

/** 保存编辑 */
const save = () => {
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      return;
    }
    loading.value = true;
    const saveOrUpdate = isUpdate.value ? updateEtpEmployeeDevices : addEtpEmployeeDevices;
    saveOrUpdate(form)
      .then((msg) => {
        loading.value = false;
        EleMessage.success({ message: msg, plain: true });
        handleCancel();
        emit('done');
      })
      .catch((e) => {
        loading.value = false;
        EleMessage.error({ message: e.message, plain: true });
      });
  });
};

/** 监听弹窗打开 */
watch(visible, () => {
  if (visible.value) {
    if (props.data) {
      assignFields(props.data);
      isUpdate.value = true;
    } else {
      resetFields();
      isUpdate.value = false;
    }
  }
});
</script>
